<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="模板id" prop="ipaddr">
        <el-input
          v-model="queryParams.templateid"
          placeholder="请输入模板id"
          clearable
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="解析状态" prop="ruleStatus">
        <el-select v-model="queryParams.ruleStatus" clearable placeholder="请选择">
          <el-option
            v-for="item in ruleStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-select v-model="queryParams.category" clearable placeholder="请选择">
          <el-option
            v-for="item in categoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="场景" prop="classificationStatus">
        <el-select v-model="queryParams.classificationStatus" clearable placeholder="请选择">
          <el-option
            v-for="item in classificationStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-radio v-model="queryParams.currentUser" label="true">当前用户</el-radio>
        <el-radio v-model="queryParams.currentUser" label="false">全量信息</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
      </el-form-item>

    </el-form>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="模板id" align="center" prop="templateid"/>
      <el-table-column label="发件人" align="center" prop="senderid"/>
      <el-table-column label="短信内容" align="center" prop="smsbody"/>
      <el-table-column label="发送频次" align="center" prop="frequence"/>
      <el-table-column label="分类" align="center" prop="category" :formatter="categoryFormatter"/>
      <el-table-column label="场景" align="center" prop="classification"/>
      <el-table-column label="标注进度" align="center" prop="kvpair"/>
      <el-table-column label="规则进度" align="center" prop="rule"/>
      <!--      <el-table-column prop="status" label="分类" width="150" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--             <span v-if="scope.row.category== 1">-->
      <!--                 <div class="status-icon icon1"></div>启动-->
      <!--             </span>-->
      <!--          <span v-if="scope.row.category== 0">-->
      <!--                 <div class="status-icon icon0"></div>禁用-->
      <!--             </span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

  </div>
</template>

<script>
import { getList } from '@/api/table'
import { Message } from 'element-ui'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      listLoading: true,
      currentPage: 1,
      total: 0,
      list: [],
      tableData: [],
      pageSize: 10,
      pageSizes: [10, 20, 30, 40, 50],
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        category: '',
        templateid: '',
        ruleStatus: undefined,
        currentUser: 'true',
        classificationStatus: ''
      },
      classificationStatus: [
        { value: 'Verification code', label: 'Verification code' },
        { value: 'Bank', label: 'Bank' },
        { value: 'Electronic payment', label: 'Electronic payment' },
        { value: 'Group buying', label: 'Group buying' },
        { value: 'Hotel', label: 'Hotel' },
        { value: 'No corresponding category', label: 'No corresponding category' },
        { value: 'Operator', label: 'Operator' }
      ],
      ruleStatus: [
        { value: false, label: '未解析' },
        { value: true, label: '已解析' }
      ],
      categoryOptions: [
        { value: 'Fraud SMS', label: 'Fraud SMS 通知' },
        { value: 'Marketing SMS', label: 'Marketing SMS 商户营销' },
        { value: 'Notification SMS', label: 'Notification SMS 推广' },
        { value: 'Span message', label: 'Span message 诈骗' }
      ]

    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    categoryFormatter(row, column) {
      let desc = ''
      this.categoryOptions.forEach((item) => {
        if (item.value === row.category) {
          desc = item.label
          return desc
        }
      })
      return desc
    },
    getList() {
      this.listLoading = true
      this.queryParams.pageNum = this.currentPage
      this.queryParams.pageSize = this.pageSize
      getList(this.queryParams).then(response => {
        this.list = response.rows
        this.total = response.total
      }).catch(error => {
        Message({
          message: error.msg || 'Error',
          type: 'error',
          duration: 5 * 1000
        })

        this.list = []
        this.currentPage = 1
        this.total = 0
      })
      this.listLoading = false
    }
  }
}
</script>
